<!--
 * @Author: Bo Cai
 * @Mail: caibo0520@qq.com
 * @Date: 2021-11-20 14:42:29
 * @LastEditors: Bo Cai
 * @LastEditTime: 2021-12-24 10:30:36
-->
<template>
  <div class="container" style="margin-top: 15px; ">
    <el-row type="flex" style="align-items: center">
      <el-tag size="large" effect="dark">{{ content.sport_labels[0].label_name }}</el-tag>
      <span style="font-size: xx-large; font-weight: bold">&nbsp;{{ content.title }}</span>
    </el-row>
    <el-row>
      <section class="question-list lh-bj-list pr">
        <ul class="pr10">
          <li>
            <div>
              <aside class="noter-pic">
                <img
                  width="50"
                  height="50"
                  class="picImg"
                  :src="user_info.avatar"
                />
              </aside>
              <div class="of">
                <span class="fl">
                  <font class="fsize12 c-blue">{{ user_info.username }}</font>
                </span>
              </div>
              <div style="display: flex;justify-content: space-between; align-items: flex-end">
                <div style="display: flex;justify-content: center;align-items: center;flex-direction: column;"
                >
                  <span>编辑于：{{ content.update_time }}</span>
                </div>
                <span>
                  <a>点赞（{{ Math.floor(Math.random() * (1000 - 1)) + 1 }}）</a>
                  <a>收藏（{{ Math.floor(Math.random() * (1000 - 1)) + 1 }}）</a>
                  <a>浏览（{{ Math.floor(Math.random() * (1000 - 1)) + 1 }}）</a>
                </span>
              </div>
            </div>
          </li>
        </ul>
      </section>
    </el-row>
    <el-row>
      <tinymceEditor
        v-model="content.text"
        ref="editor"
        :disabled="true"
        style="height: 500px"
      ></tinymceEditor>
    </el-row>
    <el-row>
      <div class="mt50 commentHtml">
        <div>
          <h6 class="c-c-content c-infor-title" id="i-art-comment">
            <span class="commentTitle">评论</span>
          </h6>
          <section class="lh-bj-list pr mt20 replyhtml">
            <ul>
              <li class="unBr">
                <aside class="noter-pic">
                  <img
                    width="50"
                    height="50"
                    class="picImg"
                    src="~/assets/img/avatar-boy.gif"
                  />
                </aside>
                <div class="of">
                  <section class="n-reply-wrap">
                    <fieldset>
                      <textarea
                        name=""
                        v-model="comment.content"
                        placeholder="输入您要评论的文字"
                        id="commentContent"
                      ></textarea>
                    </fieldset>
                    <p class="of mt5 tar pl10 pr10">
                      <span class="fl"
                      ><tt
                        class="c-red commentContentmeg"
                        style="display: none"
                      ></tt
                      ></span>
                      <input
                        type="button"
                        value="回复"
                        class="lh-reply-btn"
                      />
                    </p>
                  </section>
                </div>
              </li>
            </ul>
          </section>
          <section class="">
            <section class="question-list lh-bj-list pr">
              <ul class="pr10">
                <li v-for="(comment, index) in comments" v-bind:key="index">
                  <div>
                    <aside class="noter-pic">
                      <img
                        width="50"
                        height="50"
                        class="picImg"
                        :src="comment.avatar"
                      />
                    </aside>
                    <div class="of">
                      <span class="fl">
                        <font class="fsize12 c-blue">
                          {{ comment.username }}</font
                        >
                        <font class="fsize12 c-999 ml5">评论：</font></span
                      >
                      <p class="of mt5 tar pl10 pr10">
                        <el-button
                          type="danger"
                          icon="el-icon-delete"
                          circle
                          size="mini"
                          title="删除评论"
                        ></el-button>
                      </p>
                    </div>
                    <div class="noter-txt mt5">
                      <p>{{ comment.text }}</p>
                    </div>
                    <div class="of mt5">
                      <span class="fr"
                      ><font class="fsize12 c-999 ml5">{{
                          comment.create_time
                        }}</font></span
                      >
                    </div>
                  </div>
                </li>
              </ul>
            </section>
          </section>
          <div class="paging">
            <div class="paging">
              <el-pagination background layout="prev, pager, next" :total="comment_total"
                             :current-page="comment_query_obj.page_no" :page-size="comment_query_obj.page_size"
                             @current-change="goto_comment_page"
              />
            </div>
          </div>
          <!-- 公共分页 结束 -->
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
import content_api from '@/api/content'
import tinymceEditor from '~/components/tinymce-editor'

export default {
  components: {
    tinymceEditor
  },
  layout: 'base_layout',
  data () {
    return {
      content_id: 1,
      content: {},
      comment: '',
      user_info: {
        birthday: '',
        avatar: '',
        email: '',
        username: '',
        personal_profile: '',
        sex: '',
      },
      campus_identity: {
        campus_name: '',
        major: '',
        class_name: '',
        admission_date: '',
      },
      comments: [],
      comment_total: 0,
      comment_query_obj: {
        content_id: 1,
        page_size: 4,
        page_no: 1,
      }
    }
  },
  asyncData ({
    params,
    error
  }) {
    return content_api.get_contents({ 'content_id': params.id }).then((response) => {
      if (response.data.success) {
        return {
          content: response.data.content.contents[0]
        }
      } else {
        this.$message.error('内容获取失败！')
      }
    })
  },
  created () {
    this.init_user_info()
    this.init_comments()
  },
  methods: {
    goto_comment_page (page) {
      this.comment_query_obj.page_no = page
      this.get_comments()
    },
    init_user_info () {
      let user_info = this.$cookies.get('qingdong_user')
      if (user_info.campus_identity) {
        this.campus_identity = user_info.campus_identity
      }
      this.user_info = user_info
    },
    init_comments () {
      this.get_comments()
    },
    get_comments () {
      content_api.get_comments({
        content_id: this.content_id,
        page_no: this.comment_query_obj.page_no,
        page_size: this.comment_query_obj.page_size
      }).then((response) => {
        if (response.data.success) {
          this.comment_total = response.data.content.total
          this.comments = response.data.content.comments
          console.log(this.comments)
          console.log(this.comment_total)
        } else {
          this.$message.error('评论获取失败！')
        }
      })
    }
  },
}
</script>
<style>
</style>
